<template>
	<view class="tn-p">
		<uv-radio-group v-model="defaultValue" @change="switchDefault" placement="column">
			<template v-for="(item, index) in list" :key="index">

				<view class="ta-card">
					<view class="ta-card-body" @click="back && goto.addrConfirm(back, item.id)">
						<view class="tn-mt-xs flex-x flex-align-center">
							<uv-icon name="account" size="40rpx" color="rgba(0,0,0,0.3)" />
							<view class="flex-x flex-1 flex-wrap tn-ml-sm tn-text-sm">
								<text class="tn-text-bold">{{ item.user_name }}</text>
								<text class="tn-text-bold tn-ml-sm">{{ item.user_phone }}</text>
							</view>
						</view>
						<view class="tn-text-xs flex-x flex-align-center">
							<uv-icon name="map" size="40rpx" color="rgba(0,0,0,0.3)" />
							<view class="flex-x flex-1 tn-ml-sm flex-wrap ta-desc-text">
								<view>{{ item.region_prov }} {{ item.region_city }} {{ item.region_area }}</view>
								<view>{{ item.region_addr }}</view>
							</view>
						</view>
					</view>

					<view class="ta-card-foot flex-x-between flex-align-center">
						<uv-radio label="默认地址" :name="item.id" labelSize="24rpx" />
						<uv-button size="mini" @click="remove(item.id)" customStyle="border:none">
							<uv-icon size="35rpx" name="trash-fill" color="error" label="删除" labelSize="24rpx" />
						</uv-button>
						<uv-button size="mini" @click="goto.addrForm(item.id, back)" customStyle="border:none">
							<uv-icon size="35rpx" name="edit-pen-fill" color="primary" label="编辑" labelSize="24rpx" />
						</uv-button>
					</view>
				</view>
			</template>

		</uv-radio-group>

		<view class="footbox">
			<uv-transition :show="!loading" mode="slide-bottom">
				<view class="tn-mt-xl tn-pt flex-center">
					<uv-button @click="goto.addrForm(0, back)" shape="circle" type="primary" text="新 增"
						customStyle="width:500rpx;height:90rpx" />
				</view>
			</uv-transition>
		</view>

	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaCache, TaUseAccount, TaDataAddress, TaToast } from '@/utils';

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			back: <string>'',
			list: <any[]>TaCache.get('mall.address') || [],
			defaultValue: '',
			loading: true,
		}
	},
	onLoad(option: any) {
		this.back = option.back || ''
	},
	onShow() {
		uni.stopPullDownRefresh();
		this.loadData().then(() => {
			if (this.list.length < 1) {
				this.goto.addrForm(0, this.back, true)
			}
		})
	},
	onPullDownRefresh() {
		this.loadData();
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 加载所有地址
		loadData() {
			return new Promise((resolve, reject) => {
				TaDataAddress.get().then((ret: any) => {
					resolve(this.list = ret.data.list)
					// 默认地址显示
					if (!this.list.some((x: any) => x.type > 0 && (this.defaultValue = x.id))) {
						this.defaultValue = '';
					}
					TaCache.set('mall.address', ret.data.list)
					this.loading = false;
				}).catch(reject)
			})
		},
		// 删除收货地址
		remove(id: any) {
			TaToast.confirm('确认要移除该地址吗？').then(() => {
				TaDataAddress.del(id).then((ret: any) => {
					TaToast.success(ret.info).then(() => this.loadData())
				})
			})
		},
		// 切换默认地址
		switchDefault() {
			TaDataAddress.state({ id: this.defaultValue, type: 1 }).catch((e: any) => {
				TaToast.error('切换地址失败！').then(() => this.loadData())
			})
		}
	}
})
</script>